<@>layout("/common/default.html"){
<style>
    body {
        width: 100%;
        min-height: 95%;
    }

    .layui-table-page {
        padding: 4px 7px 0 !important;
    }

    .x-so {
        margin-bottom: 0px;
    !important;
    }
</style>
<div class="layui-row" style="margin-top: 8px;margin-left: 8px">
    <div class="layui-form layui-col-md12 x-so">
        <input id="name" type="text" name="name" placeholder="委托单位" autocomplete="off" class="layui-input">
        <button class="layui-btn" onclick="reLoad();">搜索</button>
    </div>
</div>
<div align="right" style="right: 20px;" id="areachoose">
    <div class="layui-row layui-col-space15">
        <table class="layui-table" lay-size="sm" id="orders-table" lay-filter="orders-table"></table>
    </div>

    <script type="text/html" id="orders-state">
        {{#  if(d.state == 1){ }}
        <span class="layui-badge layui-bg-green">有效</span>
        {{#  } }}
        {{#  if(d.state == 0){ }}
        <span class="layui-badge">无效</span>
        {{#  } }}
    </script>
    <script type="text/html" id="table-index">
        {{d.LAY_TABLE_INDEX + 1}}
    </script>
</div>
<div style="display: none">
    <input id="checkedIds">
    <input id="checkedNames">
</div>
<script>

    $(function () {
        $('#checkedIds').val('');
        $('#checkedNames').val('');
        var name =$('#name').val();
        var url = '${ctxPath}/ajax/excelTemplate/getOrders?name='+name;
        layui.use("table", function () {
            var table = layui.table;
            //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
            var table_data = new Array();
            table.render({
                elem: "#orders-table",
                size: 'sm',
                height: 300,
                page: true,
                cols: [[
                    {field: 'id', type: 'checkbox', fixed: 'left'},
                    {field: 'index', width: 80, templet: '#table-index', title: '序号'},
                    {field: 'name', width: 280, title: '委托单位'},
                    {field: 'number', width: 300, title: '委托编号'},
                    {field: 'state', width: 100, sort: true, templet: '#orders-state', title: '状态'}
                ]],
                url: url,
                page: { //分页设定
                    layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
                    , curr: 1 //设定初始在第 1 页
                    , limit: 5//每页多少数据
                    , groups: 5 //只显示 5 个连续页码
                }
                , done: function (res, curr, count) {
                    //数据表格加载完成时调用此函数
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    //设置全部数据到全局变量
                    table_data = res.data;
                    //循环所有数据，找出对应关系，设置checkbox选中状态
                }
            });
            table.on('checkbox(orders-table)', function (obj) {
                //全选
                if("all"==obj.type){
                    var checkStatus = table.checkStatus('orders-table'); //test即为基础参数id对应的值
                    if(true==checkStatus.isAll ){
                        var datas = checkStatus.data;
                        if(datas.length >0){
                            var checkedIds = '';
                            var checkedNames = '';
                            for(var i = 0; i< datas.length; i++){
                                var data = datas[i];
                                checkedIds += data.id + ',';
                                checkedNames += data.name + ',';
                            }
                            $('#checkedIds').val(checkedIds);
                            $('#checkedNames').val(checkedNames);
                        }
                    }else {
                        $('#checkedIds').val('');
                        $('#checkedNames').val('');
                    }
                    //单选
                }else if("one"==obj.type){
                    var id = obj.data.id;
                    var name = obj.data.name;
                    var checkedZt = obj.checked;
                    if(id){
                        if(checkedZt){
                            var checkedIds  = $('#checkedIds').val()+ id +',';
                            var checkedNames  = $('#checkedNames').val() + name  +',';
                            $('#checkedIds').val(checkedIds);
                            $('#checkedNames').val(checkedNames);
                        }else {
                            var checkedIds  = ($('#checkedIds').val()).replace(id+',', '');
                            var checkedNames  =($('#checkedNames').val()).replace(name+',', '');
                            $('#checkedIds').val(checkedIds);
                            $('#checkedNames').val(checkedNames);
                        }
                    }
                }
            });
        })
    });
    function reLoad() {
        var name =$('#name').val();
        var url = '${ctxPath}/ajax/excelTemplate/getOrders?name='+name;
        var table = layui.table;
        table.render({
            elem: "#orders-table",
            size: 'sm',
            height: 300,
            page: true,
            cols: [[
                {field: 'id', type: 'checkbox', fixed: 'left'},
                {field: 'index', width: 80, templet: '#table-index', title: '序号'},
                {field: 'name', width: 280, title: '委托单位'},
                {field: 'number', width: 300, title: '委托编号'},
                {field: 'state', width: 100, sort: true, templet: '#orders-state', title: '状态'}
            ]],
            url: url,
            page: { //分页设定
                layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , limit: 5//每页多少数据
                , groups: 5 //只显示 5 个连续页码
            }
            , done: function (res, curr, count) {
                //数据表格加载完成时调用此函数
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

                //设置全部数据到全局变量
                table_data = res.data;

                //循环所有数据，找出对应关系，设置checkbox选中状态
            }
        });
    }
</script>
<@>}